import React,{Component} from 'react';
import {Menu, Icon} from 'antd';
import {Link, withRouter} from 'react-router-dom';
class Nav extends Component{
	constructor(props){
		super(props);
		let now = this.getNow(this.props.location)
		this.state = {
			now
		}
	}
	shouldComponentUpdate(nextProps){
		let now = this.getNow(nextProps.location);
		if(now != this.state.now){
			this.setState({
				now
			})
			return false
		}
		return true;
	}
	getNow(location){
		let now = location.pathname.split('/')[1];
		return now;
	}
	render(){
		let {mode, id} = this.props;
		return(
			<Menu mode={mode} id={id} selectedKeys={[this.state.now]} theme="light">
				<Menu.Item key="index">
					<Link to="/index/all"><Icon type="home"></Icon>首页</Link>
				</Menu.Item>
				<Menu.Item key="book">
					<Link to="/book"><Icon type="book"></Icon>教程</Link>
				</Menu.Item>
				<Menu.Item key="about">
					<Link to="/about"><Icon type="info-circle-o"></Icon>关于</Link>
				</Menu.Item>
			</Menu>
		)
	}
}
export default withRouter((props)=>{
	let{mode, id, location} = props;
	return <Nav
		mode={mode}
		id={id}
		location={location}
	/>
})